<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom></HeadCustom>
		<view class="wrap fboxCol Ycenter Xcenter">
			<view class="content fboxCol Ycenter Xcenter">
				<view class="tit font48 fwb">企业名片</view>
				
				<!--  #ifdef  H5 -->
				<view class="pic fboxRow Ycenter Xcenter">
					<canvas class="inner" canvas-id="qrcode" style="width: 120px;height: 120px;"></canvas>
					<image class="companyLogo" :src="detail.companyLogo"></image>
				</view>
				<!--  #endif -->
				<!--  #ifdef  MP -->
				<view class="pic fboxRow Ycenter Xcenter">
					<image class="weChatCode" :src="weChatCode"></image>
				</view>
				<!--  #endif -->
				<view class="name mt32 font34">{{detail.companyName}}</view>
				<view class="job font24 lh44 color-6B707C">{{detail.industryName}}</view>
			</view>
			<image class="logo mt32" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.0/logo2.png"></image>
			<view class="btn fboxRow Ycenter Xcenter bg-linear font30 " @click="wxSave">保存二维码</view>
		</view>
		<view class="canvas-fixed" id="canvas-fixed">
			<canvas id="firstCanvas" style="width: 285px;height: 394px;" class="firstCanvas" canvas-id="firstCanvas"></canvas>
		</view>
	</view>
</template>

<script>
	import { companyCardPreview, companyUnlimitedQRCode } from '@/api/card.js';
	import { Base64toUrl } from '@/api/index.js';
	import UQrcode from '@/static/js/uqrcode.js'
	// import logo2 from 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.0/logo2.png';
	export default {
		data() {
			return {
				theme: getApp().globalData.appTheme,
				globalColor: getApp().globalData.globalColor,
				detail: {},
				id: '',
				linkData: {id: ''},
				codeImg: '',
				weChatCode: ''
			}
		},
		onLoad(options) {
			if(options && options.id){
				this.id = options.id
				this.linkData= {id:options.id}
			}
		},
		onShow() {
			this.getInit()
		},
		methods: {
			getInit() {
				companyCardPreview({companyId: this.id}).then(res=>{
					this.detail = res.data
					uni.setNavigationBarTitle({
						title: `${res.data.companyName}-企业二维码`
					})
					// #ifdef H5
						const {bw_link} = getApp().getBWData(['bw_link'])
						let url = location.origin + location.pathname +'#/businessCard?id='+ res.data.companyId
						if(bw_link.link){
							url = url+'&bwlink='+bw_link.link
						}
						this.qrFun(url)
					// #endif
					// #ifdef MP-WEIXIN
						this.qrWeChat()
					// #endif
				})
			},
			qrWeChat(){
				companyUnlimitedQRCode({
					param: 'p/1*id/'+this.id,
					// param: this.id,
					companyId: this.id
				}).then(res=>{
					this.weChatCode = res.data
				})
			},
			// h5生成二维码
			qrFun(text){
				UQrcode.make({
					canvasId: 'qrcode',   //切记canvasId 里边的内容需要跟canvas里边canvas-id="qrcode"的名字一样
					componentInstance: this,
					text: text,  //需要转成二维码的内容是后端传过来的，我这里是onLoad传过来的，根                              据自己的需要
					size: 120,
					margin: 0,
					backgroundColor: '#fff',
					foregroundColor: '#1A1D25',
					fileType: 'jpg',
					errorCorrectLevel: UQrcode.errorCorrectLevel.H,
					success: res => {
						Base64toUrl({
							"content": res,
							"suffix": ".jpg"
						}).then(res=>{
							this.codeImg = res.data.url
							// this.wxSave()
						})
					}
				})
			},
			// 小程序画图保存图片
			async wxSave() {
				uni.showLoading({
					title: '图片正在生成中'
				})
				try {
					const _this = this
					let ctx = uni.createCanvasContext('firstCanvas', this);
					ctx.setTextAlign('center')
					ctx.fillStyle = '#141720'
					ctx.fillRect(0, 0, 570, 788);
					ctx.setFontSize(26)
					ctx.fillStyle = '#fff'
					ctx.fillText('企业名片', 142, 47)
					ctx.fillStyle = '#fff'
					ctx.fillRect(73, 90, 140, 140);
					const code = (await uni.getImageInfo({src:this.codeImg}))[1].path
					ctx.drawImage(code, 83, 100, 120, 120);
					ctx.fillStyle = '#fff'
					ctx.fillRect(123, 140, 40, 40);
					const logo = (await uni.getImageInfo({src:this.detail.companyLogo}))[1].path
					ctx.drawImage(logo, 125, 142, 36, 36);
					ctx.setFontSize(17)
					ctx.fillStyle = '#fff'
					ctx.fillText(this.detail.companyName, 142, 270)
					ctx.setFontSize(14)
					ctx.fillStyle = '#6B707C'
					ctx.fillText(this.detail.industryName, 142, 300)
					ctx.fillStyle = '#1A1D25'
					ctx.fillRect(0, 340, 570, 74);
					const bwlogo = (await uni.getImageInfo({src:'https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.0/logo2.png'}))[1].path
					ctx.drawImage(bwlogo, 120, 355, 43, 23);
					ctx.stroke()
					ctx.draw(true, (ret) => { // draw方法 把以上内容画到 canvas 中。
						console.log('draw', ret)
						uni.hideLoading()
						uni.canvasToTempFilePath({ // 保存canvas为图片
							canvasId: 'firstCanvas',
							fileType: 'jpg',
							width: 570, //分享图片尺寸=画布尺寸1*缩放比0.5*像素比2
							height: 788,
							// destWidth: 530, //分享图片尺寸=画布尺寸1*缩放比0.5*像素比2
							//                destHeight: 944,
							complete: function(res) {
								console.log('firstCanvas == tempFilePath', res.tempFilePath)
								if (!res.tempFilePath) {
									uni.showToast({
										title: '图片未生成',
										icon: 'none'
									})
									uni.hideLoading()
									return;
								}
								_this.postBase64(res.tempFilePath)
							}
						}, this)
					});

				} catch (err) {
					console.log(err)
					uni.showToast({
						title: '图片未生成',
						icon: 'none'
					})
					uni.hideLoading()
				}
			},
			postBase64(base64) {
				const _this = this
				Base64toUrl({
					content: JSON.stringify(base64),
					suffix: ".jpg"
				}).then(urlRes => {
					uni.hideLoading()
					console.log(urlRes)
					var link = document.createElement('a');
					//把a标签的href属性赋值到生成好了的url
					// link.href = dres.tempFilePath;
					link.href = urlRes.data.url;
					//通过a标签的download属性修改下载图片的名字
					link.title = (new Date().getTime()) + '.jpg';
					link.download = (new Date().getTime()) + '.jpg';
					// link.download = _this.innerData.realName + (new Date().getTime()) + '.jpg';
					//让a标签的click函数，直接下载图片
					link.click();
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.canvas-fixed {
		position: fixed;
		top:-1000px;
		left:-1000px;
		width: 570rpx;
		height: 788rpx;
		// background-color:red
	}
	.wrap{min-height: calc(90vh);}
	.content{ padding: 94rpx 0 60rpx; background-color: var(--darkViewBgColor);width: 570rpx;}
	.pic{ position: relative; margin-top: 74rpx;padding: 20rpx; background-color: #fff;}
	.weChatCode{width: 240rpx;height: 240rpx;}
	.inner{ margin: 0;position: relative;z-index: 1; }
	.companyLogo{ padding: 4rpx; width: 62rpx;height: 62rpx;position: absolute;left: 50%;top: 50%;margin: -35rpx 0 0 -35rpx; background-color: #fff;border-radius: 8rpx;z-index: 3;}
	.name{line-height: 50rpx;}
	.logo{width: 86rpx;height: 46rpx}
	.btn{margin-top: 66rpx; width: 246rpx;height: 76rpx;color:#111216; box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0,0,0,0.16);border-radius: 12rpx;}
</style>